<template>
  <div class="top">
    <div style="float: left;">
      <img style="height: 150px;margin: 15px;" src="~@assets/img-ifac-logo.png">
    </div>
    <div class="top-text">
      <p style="padding-right: 15px;">5th IFAC Workshop on Control of Systems Governed by Partial Differential Equations (CPDE 2025)</p>
      <p style="font-size: 26px;padding-top: 25px;">June 18-20, 2025, Beijing, China</p>
    </div>
    
  </div>

    <!-- <div class="top-info">
      <div>
        <p style="font-size:22px;font-weight:bold">June 18-20, 2025</p>
        <p style="font-size:22px;font-weight:bold">Beijing, China</p>
        <p>June 18-20, 2025, Beijing, China</p>
        <p> > <a href="http://droplets2023.buaa.edu.cn/pdfs/Dropletposter.pdf">2nd Announcement and Call for papers</a> </p>
      </div>
    </div> -->
</template>

<script>
  export default { };
</script>

<style lang="less" scoped>

.top { 
  width: 100%; 
  margin-bottom: 5px;
  // margin-top: 5px;
  min-height:540px;
  background:url('~@assets/img-top.jpg') no-repeat;
  background-size:100%;

}
.top-text{
    font-family: Helvetica;
    font-weight: bold;
    color: white;
    font-size: 42px;
    text-align: center;
    z-index:2;
    padding-top: 15px;
  // position:relative; 
  // top:400px;
  // left:10px;
  // background-color: rgba(128,128,128,0.6);


  // text-shadow: 5px 5px #000;
}


// .top-info::before{
//     content: "→";
// }
.top-info{
  font-size: 14px;
  color: white;
  background-color: #004e73;

  width: 300px;
  height: 160px;

  z-index:2;
  position:absolute; 
  top:360px;
  left:1080px;

  display:flex;
  justify-content:center;
  align-items:center;
  text-align: center;

  
  p{padding: 5px 0;}
  a:active,:hover,:visited,:link{ color: white; }

}
</style>
